<template>
  <div>
    <gallery-page 
      :gallery-page-width="860" 
      :gallery-page-height="410" 
      :gallery-page-item-hor-gap="30" 
      :gallery-page-item-ver-gap="20"
      :gallery-page-item-width="170"
      :gallery-page-item-height="200"
      :gallery-page-items="galleryPageItems">
    </gallery-page>
  </div>
</template>

<script type="text/babel">
  import GalleryPage from './widgets/GalleryPage'
  import KeyEventComponentMixin from './KeyEventComponentMixin'

  export default {
    mixins: [ KeyEventComponentMixin ],
    data () {
      return {
        galleryPageItems: []
      }
    },
    ready: function (argument) {
      for (var i = 0; i < 6; i++) {
        this.galleryPageItems.push({
          photoSrc: '/static/images/demo_photo.jpg',
          avatarSrc: '/static/images/demo_avatar.jpg'
        })
      }
    },
    components: {
      GalleryPage
    }
  }
</script>